<template>
  <view class="container">
    <u--form>
      <u-form-item label="箱码" prop="containerCode" labelWidth="120rpx">
        <u--input
          placeholder="请扫码"
          v-model.number="query.containerCode"
          suffixIcon="scan"
          suffixIconStyle="font-size: 68rpx"
          style="flex: 1;"
					@confirm="getBoxInfo"
        >
        </u--input>
      </u-form-item>
    </u--form>
    <!-- 扫描结果展示区域 -->
    <uni-card v-if="Object.keys(boxInfo).length > 0" title="箱码信息">
      <view class="info-grid">
        <view class="info-item">
          <view class="info-label">料号</view>
          <view class="info-value">{{ boxInfo.materialCode || '-' }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">批号</view>
          <view class="info-value">{{ boxInfo.materialBatch || '-' }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">数量</view>
    			<view class="info-value">{{ boxInfo.qty || '-' }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">生产日期</view>
          <view class="info-value">{{ boxInfo.productionDate || '-' }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">冻结状态</view>
          <view class="info-value">{{ dict.text.semi_frozen[boxInfo.frozenStatus] || '-' }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">物料状态</view>
          <view class="info-value">{{ dict.text.semi_material_status[boxInfo.status] || '-' }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">刃高</view>
    			<view class="info-value">{{ boxInfo.bladeHeight || '-' }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">入库时间</view>
          <view class="info-value">{{ boxInfo.inboundTime || '-' }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">胶条截面</view>
    			<view class="info-value">{{ boxInfo.sealCross || '-' }}</view>
        </view>
      </view>
    </uni-card>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
	import { getBoxInStoreAPI } from '@/api/work/inStore'
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		dicts: ['semi_material_status', 'semi_frozen'],
		data() {
			return {
				query: {
					containerCode: ''
				},
				showResult: false,
				boxInfo: {}
			};
		},
		onLoad() {
			uni.$on('scancodedate',(data) => this.getCode(data.code))
		},  
		onUnload() {    
			uni.$off('scancodedate')
		},
		methods: {
			async getCode(code) {
				const regex = /^R-\d+$/
				if (regex.test(code)) {
					this.query.containerCode = code
					this.getBoxInfo()
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描正确的箱码'
					})
				}
			},
			async getBoxInfo() {
				const res = await getBoxInStoreAPI({
					containerCode: this.query.containerCode
				})
				if (res.code === 200) {
					this.boxInfo = res.data
				} else {
					this.query.containerCode = ''
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-top: 10rpx;
}

.info-item {
  width: 100%;
  padding: 15rpx;
  background-color: #f5f7fa;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  line-height: 40rpx;
}

/* 可编辑输入框样式：与原文本样式保持一致，减少突兀感 */
.editable-input {
  font-size: 28rpx !important;
  color: #333 !important;
  font-weight: 500 !important;
  padding: 5rpx 0 !important;
  background: transparent !important;
  border: none !important;
  line-height: 40rpx !important;
  /* 聚焦时轻微边框提示，不破坏整体风格 */
  &:focus {
    border-bottom: 1px solid #2979ff !important;
    border-radius: 0 !important;
  }
}

/* 输入框后缀单位样式 */
.u-input__suffix {
  font-size: 28rpx !important;
  color: #333 !important;
  font-weight: 500 !important;
}

.uni-card {
	margin: 0 !important;
}

</style>
